<template>
  <div 
    class="transfer"
    :class="[!isPC ? 'transfer-h5' : '', isMobile ? 'transfer-h5-wechat' : '']"
  >

    <header class="transfer-header transfer-h5-header" v-if="!isPC">
	  
      <div v-if="!props.isHiddenBackIcon" @click="cancel" style="margin-top: 50px;">
        <Icon
          class="icon"
          :file="backIcon"
          :width="'18px'"
          :height="'18px'"
        />
      </div>
      <view class="title">
		<text v-if="lang!='ru'">{{ transferTitle }}</text>
		<text v-else-if="lang=='ru'&&transferTitle=='发起群聊'">Начать групповой чат</text>
		<text v-else-if="lang=='ru'&&transferTitle=='发起单聊'">Начать чат</text>
		<text v-else>{{ transferTitle }}</text>
	  </view>
      <span class="space"></span>
    </header>
    <main class="main">
      <div class="left">
        <header class="transfer-header">
          <!-- PC 端触发 @keyup.enter -->
		    <block v-if="lang!='ru'">
			  <input
			    v-if="isPC && isTransferSearch"
			    type="text"
			    :value="searchValue"
			    @keyup.enter="handleInput" 
			    :placeholder="TUITranslateService.t('component.请输入userID')"
			    enterkeyhint="search"
			    :class="[isUniFrameWork ? 'left-uniapp-input' : '']"/>
			  <!-- 非 PC 端触发 blur -->  
			  <input
			    v-if="!isPC && isTransferSearch"
			    type="text"
			    @blur="handleInput"
			    @confirm="handleInput"
			    :placeholder="TUITranslateService.t('component.请输入userID')"
			    enterkeyhint="search"
			    :value="searchValue"
			    :class="[isUniFrameWork ? 'left-uniapp-input' : '']"/>  
		    </block>
          
			<block v-if="lang=='ru'">
				<input
				  v-if="isPC && isTransferSearch"
				  type="text"
				  :value="searchValue"
				  @keyup.enter="handleInput" 
				  :placeholder="'Введите ID пользователя'"
				  enterkeyhint="search"
				  :class="[isUniFrameWork ? 'left-uniapp-input' : '']"/>
				<!-- 非 PC 端触发 blur -->  
				<input
				  v-if="!isPC && isTransferSearch"
				  type="text"
				  @blur="handleInput"
				  @confirm="handleInput"
				  :placeholder="'Введите ID пользователя'"
				  enterkeyhint="search"
				  :value="searchValue"
				  :class="[isUniFrameWork ? 'left-uniapp-input' : '']"/>  
			</block>
        </header>
        <main class="transfer-left-main">
          <ul class="transfer-list">
            <li
              class="transfer-list-item"
              @click="selectedAll"
              v-if="optional.length > 1 && !isRadio"
            >
              <Icon
                v-if="transferSelectedList.length === optional.length"
                :file="selectedIcon"
                :width="'18px'"
                :height="'18px'"
              ></Icon>
              <i v-else class="icon-unselected"></i>
              <span v-if="lang!='ru'" class="select-all">{{TUITranslateService.t("component.全选")}}</span>
			  <span v-if="lang=='ru'" class="select-all">Выбрать все</span>
            </li>
            <li
              class="transfer-list-item"
              v-for="(item, index) in transferList"
              :key="item.userID"
              @click="selected(item)"
            >
              <Icon
                v-if="transferSelectedList.indexOf(item) > -1"
                :file="selectedIcon"
                :class="[item.isDisabled && 'disabled']"
                :width="'18px'"
                :height="'18px'"
              ></Icon>
              <i
                v-else
                :class="[item.isDisabled && 'disabled', 'icon-unselected']"
              ></i>
              <template v-if="!isTransferCustomItem">
                <img
                  class="avatar"
                  :src="
                    item.avatar ||
                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
                  "
                  onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
                />
                <span class="name">{{ item.nick || item.userID }}</span>
                <span v-if="item.isDisabled"
                  >（{{ TUITranslateService.t("component.已在群中") }}）</span
                >
              </template>
              <template v-else>
                <slot name="left" :data="item" />
              </template>
            </li>
            <li
              class="transfer-list-item more"
              @click="getMore"
              v-if="transferTotal > transferList.length"
            >
              {{ TUITranslateService.t("component.查看更多") }}
            </li>
          </ul>
        </main>
      </div>
      <div class="right">
        <header class="transfer-header" v-if="isPC">{{ transferTitle }}</header>
        <ul class="transfer-list" v-if="resultShow">
          <p class="transfer-text" v-if="transferSelectedList.length > 0 && isPC">
            {{ TUITranslateService.t("component.已选中")
            }}{{ transferSelectedList.length
            }}{{ TUITranslateService.t("component.人") }}
          </p>
          <li
            class="transfer-list-item space-between"
            v-for="(item, index) in transferSelectedList"
            :key="index"
          >
            <aside class="transfer-list-item-content">
              <template v-if="!isTransferCustomItem">
                <img
                  class="avatar"
                  :src="
                    item.avatar ||
                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
                  "
                  onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"
                />
                <span v-if="isPC" class="name">{{ item.nick || item.userID }}</span>
              </template>
              <template v-else>
                <slot name="right" :data="item" />
              </template>
            </aside>
            <span @click="selected(item)" v-if="isPC">
              <Icon :file="cancelIcon" :width="'18px'" :height="'18px'"></Icon>
            </span>
          </li>
        </ul>
        <footer class="transfer-right-footer">
          <button class="btn btn-cancel" @click="cancel">
            <text v-if="lang!='ru'">{{ TUITranslateService.t("component.取消") }}</text>
			<text v-if="lang=='ru'">Нет</text>
          </button>
          <button
            v-if="transferSelectedList.length > 0"
            class="btn"
            @click="submit"
          >
			<text v-if="lang!='ru'">{{ TUITranslateService.t("component.完成") }}</text>
            <text v-if="lang=='ru'">Завершено</text>
          </button>
          <button v-else class="btn btn-no" @click="submit">
            <text v-if="lang!='ru'">{{ TUITranslateService.t("component.完成") }}</text>
            <text v-if="lang=='ru'">Завершено</text>
          </button>
        </footer>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
import { ref, watchEffect, computed } from "../../../adapter-vue";
import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
import { ITransferListItem } from "../../../interface";
import Icon from "../Icon.vue";
import selectedIcon from "../../../assets/icon/selected.svg";
import backIcon from "../../../assets/icon/back.svg";
import cancelIcon from "../../../assets/icon/cancel.svg";
import { isPC, isUniFrameWork, isMobile } from "../../../utils/env";
const lang = getApp().globalData.lang;

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  selectedList: {
    type: Array,
    default: () => [],
  },
  isSearch: {
    type: Boolean,
    default: true,
  },
  isRadio: {
    type: Boolean,
    default: false,
  },
  isCustomItem: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  type: {
    type: String,
    default: "",
  },
  resultShow: {
    type: Boolean,
    default: true,
  },
  total: {
    type: Number,
    default: 0,
  },
  isHiddenBackIcon: {
    type: Boolean,
    default: false,
  }
});

const type = ref("");
const transferList = ref<Array<ITransferListItem>>([]);
const transferTotal = ref<Number>(0);
const transferSelectedList = ref<Array<ITransferListItem>>([]);
const isTransferSearch = ref(true);
const isTransferCustomItem = ref(false);
const transferTitle = ref("");
const searchValue = ref("");

watchEffect(() => {
  if (props.isCustomItem) {
    for (let index = 0; index < props.list.length; index++) {
      if (
        (props.list[index] as any).conversationID.indexOf("@TIM#SYSTEM") > -1
      ) {
        props.list.splice(index, 1);
      }
      transferList.value = props.list as Array<ITransferListItem>;
    }
  } else {
    transferList.value = props.list as Array<ITransferListItem>;
  }
  transferTotal.value = props.total ? props.total : props.list.length;
  transferSelectedList.value = (props.selectedList && props.selectedList.length > 0 ? props.selectedList : transferSelectedList.value) as any;
  isTransferSearch.value = props.isSearch;
  isTransferCustomItem.value = props.isCustomItem;
  transferTitle.value = props.title;
  type.value = props.type;
});

const emit = defineEmits(["search", "submit", "cancel", 'getMore']);

// 可选项
const optional = computed(() =>
  transferList.value.filter((item: any) => !item.isDisabled)
);

const handleInput = (e: any) => {
  searchValue.value = e.target.value;
  emit("search", e.target.value);
};
const selected = (item: any) => {
  if (item.isDisabled) {
    return;
  }
  let list: Array<ITransferListItem> = transferSelectedList.value;
  const index: number = list.indexOf(item);
  if (index > -1) {
    return transferSelectedList.value.splice(index, 1);
  }
  if (props.isRadio) {
    list = [];
  }
  list.push(item);
  transferSelectedList.value = list;
};

const selectedAll = () => {
  if (transferSelectedList.value.length === optional.value.length) {
    transferSelectedList.value = [];
  } else {
    transferSelectedList.value = [...optional.value];
  }
};

const submit = () => {
  emit("submit", transferSelectedList.value);
  // 针对小程序做的数据清空
  searchValue.value = "";
};

const cancel = () => {
  emit("cancel");
  // 针对小程序做的数据清空
  searchValue.value = "";
};

const getMore = () => {
  emit("getMore");
}
</script>

<style lang="scss" scoped src="./style/transfer.scss">
	// .transfer-h5-wechat{
	// 	height:80vh !important;padding-top: 20vh !important;
	// }
</style>
